<template>
    <div class="product">
      <!--添加菜单&权限-->
      <div class="common-level-rail d-b-c">
        <el-button size="small" type="primary" @click="addClick" icon="el-icon-plus" v-auth="'/auth/menu/add'">添加菜单&权限</el-button>
        <el-form :inline="true" :model="formSearch" size="small">
          <el-form-item>
            <el-checkbox v-model="formSearch.is_menu" @change="changeIsMenuFunc">只显示菜单</el-checkbox>
            <el-checkbox v-model="formSearch.pack_up" @change="changePackUpFunc">收起</el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <!--内容-->
      <div class="product-content">
        <div class="table-wrap">
          <div>
            <el-table
              size="small"
              :data="tableData"
              style="width: 100%;margin-bottom: 20px;"
              row-key="menuId"
              border
              
              ref="theTable"
              :tree-props="{ children: 'children' }"
              v-loading="loading"
            >
              <el-table-column prop="name" label="菜单名称">
                <template slot-scope="scope">
                  <span v-if="scope.row.path=='/plus'" class="fb red f18">
                    {{scope.row.name}}
                  </span>
                  <span v-else>
                    <span v-if="scope.row.isRoute==2" class="red">{{scope.row.name}}</span>
                    <span v-else>{{scope.row.name}}</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="path" label="路径"></el-table-column>
              <el-table-column prop="isRoute" label="类别" width="90">
                <template slot-scope="scope">
                  <span v-if="scope.row.isRoute==1">页面</span>
                  <span v-if="scope.row.isRoute==0">按钮</span>
                  <span v-if="scope.row.isRoute==2">接口</span>
                </template>
              </el-table-column>
              <el-table-column prop="isShow" label="是否显示" width="80">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.isShow"
                    :active-value="true"
                    :inactive-value="false"
                    @change="isShowFunc(scope.row)"
                    active-color="#13ce66"
                    inactive-color="#cccccc"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="sort" label="排序" width="60"></el-table-column>
              <el-table-column prop="createTime" label="添加时间" width="140"></el-table-column>
              <el-table-column prop="name" label="操作" width="230">
                <template slot-scope="scope">
                  <el-button @click="addClick(scope.row,'copy')" type="text" size="small" v-auth="'/auth/menu/copy'">一键复制</el-button>
                  <el-button @click="addClick(scope.row,'child')" type="text" size="small" v-auth="'/auth/menu/addchild'">添加子菜单</el-button>
                  <el-button @click="editClick(scope.row)" type="text" size="small" v-auth="'/auth/menu/edit'">编辑</el-button>
                  <el-button @click="deleteClick(scope.row)" type="text" size="small" v-auth="'/auth/menu/delete'">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
  
      <!--添加-->
      <Add v-if="open_add" :open_add="open_add" :add_type="add_type" :rawData="rawData" :selectModel="selectModel" @closeDialog="closeDialogFunc($event, 'add')"></Add>
  
      <!--编辑-->
      <Edit v-if="open_edit" :open_edit="open_edit" :rawData="rawData" :selectModel="selectModel" @closeDialog="closeDialogFunc($event, 'edit')"></Edit>
  
    </div>
  </template>
  <script>
  import AccessApi from '@/api/menu.js';
  import Edit from './part/Edit.vue';
  import Add from './part/Add';;
  import { deepClone } from '@/utils/base.js';
  export default {
    components: {
      /*编辑组件*/
      Edit: Edit,
      Add: Add
    },
    data() {
      return {
        /*是否正在加载*/
        loading: true,
        /*筛选搜索*/
        formSearch: {
          /*是否只显示菜单*/
          is_menu: false,
          /*是否收起*/
          pack_up: false
        },
        /*原始数据*/
        rawData: [],
        /*表格数据*/
        tableData: [],
        /*是否打开添加弹窗*/
        open_add: false,
        /*添加类型*/
        add_type:'',
        /*选中的对象*/
        selectModel:{},
        /*是否打开编辑弹窗*/
        open_edit: false,
        /*当前编辑的对象*/
        userModel: {},
      };
    },
    created() {
      /*获取列表*/
      this.getTableList();
    },
    methods: {
      /*列表是否只显示菜单*/
      changeIsMenuFunc(e) {
        let list = deepClone(this.rawData);
        if (e) {
          this.showScreen(list, 1);
          this.tableData = list;
        } else {
          this.tableData = list;
        }
      },
  
      /*是否显示开关*/
      isShowFunc(e) {
        let self = this;
        AccessApi.status({ id: e.accessId, status: e.isShow }, true)
          .then(data => {
            if (data.code == 1) {
              self.$message({
                message: data.msg,
                type: 'success'
              });
              self.getTableList();
            }
          })
          .catch(error => {
            self.loading = false;
          });
      },
  
      /*是否收起*/
      changePackUpFunc(e) {
        this.forArr(this.tableData, !e);
      },
  
      /*列表收起*/
      forArr(arr, isExpand) {
        arr.forEach(i => {
          this.$refs.theTable.toggleRowExpansion(i, isExpand);
          if (i.children) {
            this.forArr(i.children, isExpand);
          }
        });
      },
  
      /*切换显示类别*/
      changeShowFunc(e) {
        let list = deepClone(this.rawData);
        if (e == 'all') {
          this.tableData = list;
        } else {
          let type;
          if (e == 'show') {
            type = 1;
          }
          if (e == 'hide') {
            type = 0;
          }
          this.showScreen(list, type);
          this.tableData = list;
        }
      },
  
      /*显示筛选*/
      showScreen(list, type) {
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          if (typeof item.isMenu != 'undefined' && item.isMenu != type) {
            list.splice(i, 1);
            i--;
          } else {
            if (item.children.length > 0) {
              this.showScreen(item.children, type);
            }
          }
        }
      },
  
      /*获取列表*/
      getTableList() {
        let self = this;
        let Params = {};
        AccessApi.menulist(Params, true)
          .then(res => {
            console.log(res)
            self.loading = false;
            self.rawData = res.data;
            self.tableData = res.data;
          })
          .catch(error => {
            self.loading = false;
          });
      },
  
      /*打开添加*/
      addClick(e,type) {
        if(e&&typeof(e)!='undefined'){
          this.add_type=type;
          this.selectModel=deepClone(e);
        }else{
          this.parentsId=0;
        }
        this.open_add = true;
      },
  
      /*打开编辑*/
      editClick(item) {
        this.selectModel = item;
        this.open_edit = true;
      },
  
      closeDialogFunc(e, f) {
        if (f == 'add') {
          this.open_add = e.openDialog;
          if (e.type == 'success') {
            this.getTableList();
          }
        }
        if (f == 'edit') {
          this.open_edit = e.openDialog;
          if (e.type == 'success') {
            this.getTableList();
          }
        }
      },
  
      /*删除用户*/
      deleteClick(row) {
        let self = this;
        self
          .$confirm('删除后不可恢复，确认删除该记录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            self.loading = true;
            AccessApi.delAccess(
              {
                menuId: row.menuId
              },
              true
            )
              .then(data => {
                if (data.code == 200) {
                  self.loading = false;
                  self.$message({
                    message: data.msg,
                    type: 'success'
                  });
                  self.getTableList();
                }
              })
              .catch(error => {
                self.loading = false;
              });
          })
          .catch(() => {});
      }
    }
  };
  </script>